<template>
  <vxe-column v-bind="$attrs">
    <template v-slot="scope">
      <el-form-item v-if="isEdit(scope.row)" label="" :prop="$attrs.field">
        <component
          ref="inputWidget"
          style="width: 100%"
          :is="editComponent"
          :modelValue="getRowData"
          :value="getRowData"
          :props="props.props"
          v-bind="$attrs"
          :disabled="disabled"
          @update:modelValue="onChange"
          @input="onInput"
          @change="onChange"
        />
      </el-form-item>
      <!-- 判断是否有default的slot -->
      <slot v-else-if="$slots.default" :row="scope.row" />
      <!-- 默认显示内容 -->
      <span v-else>{{ getRowValue(scope.row) }}</span>
    </template>
  </vxe-column>
</template>

<script setup lang="ts">
import { VxeColumn } from 'vxe-table';
import useTableInlineColumn from './useTableInlineColumn';

const emit = defineEmits(['change', 'onRowDataChange']);
type InlineCustomColumnProps = {
  editComponent: string | object;
  props: object;
  disabled?: boolean;
};
const props = withDefaults(defineProps<InlineCustomColumnProps>(), {});
const inputWidget = ref();
const { isEdit, getRowData, getRowValue, onInput, onChange, reset } = useTableInlineColumn(
  false,
  emit,
  inputWidget,
);

defineExpose({
  reset,
  focus: () => {
    if (inputWidget.value && inputWidget.value.focus) inputWidget.value.focus();
  },
});
</script>
